<template>
  <div class="glass-box">
    <draggable
      class="list-group"
      v-model="data.list"
      v-bind="data.dragOptions"
      item-key="order"
    >
      <template #item="{ element }" class="list-group-item">
        <div class="item" :class="element.name">{{ element.name }}</div>
      </template>
    </draggable>
    <draggable
      class="list-group"
      v-model="data2.list"
      v-bind="data.dragOptions"
      item-key="order"
    >
      <template #item="{ element }" class="list-group-item">
        <div class="item" :class="element.name">{{ element.name }}</div>
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import draggable from 'vuedraggable'

const props = defineProps({
  appList: Array,
})
const message = props.appList ? props.appList : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const message2 = props.appList ? props.appList : [1, 2, 3]

console.log(message)
// debugger
const data = reactive({
  drag: false,
  list: message.map((item: any, index) => {
    return { ...item, order: index + 1, name: 'a' + item }
  }),
  dragOptions: {
    animation: 500,
    group: 'description',
  },
  isColumn: false,
})
const data2 = reactive({
  drag: false,
  list: message2.map((item: any, index) => {
    return { ...item, order: index + 1, name: 'a' + item }
  }),
  dragOptions: {
    animation: 500,
    group: 'description',
  },
  isColumn: false,
})
</script>

<style scoped>
.glass-box {
  display: inline-block;
  padding: 5px;
  border: 1px dashed;

  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.1);
}
.list-group {
  display: grid;
  grid-template-columns: repeat(5, 55px);
  grid-template-rows: repeat(5, 55px);
  grid-template-areas:
    'a a b b 5'
    'a a b b 10'
    '11 12 13 14 15'
    '16 17 18 19 20'
    '21 22 23 24 25';

  overflow: hidden;
}

.a2 {
  grid-area: a;
  width: 50px;
  height: 50px;
}
.a3 {
  grid-area: b;
}
.item {
  width: 50px;
  height: 50px;
  border: 1px dashed;
}

.mini {
  height: 120px;
  grid-template-columns: repeat(2, 60px);
  grid-template-rows: repeat(2, 60px);
}

.middle {
  height: 180px;
  grid-template-columns: repeat(3, 60px);
  grid-template-rows: repeat(3, 60px);
}
.large {
  height: 240px;
  grid-template-rows: repeat(4, 60px);
  grid-template-columns: repeat(3, 60px);
}

.large-plus {
  height: 480px;
  grid-template-rows: repeat(4, 60px);
  grid-template-columns: repeat(3, 60px);
}
</style>
